var star = 'path://M100,0 L41.22,180.90 L195.10,69.09 L4.89,69.09 L158.77,180.90 z'; //五角星

var pc = 'path://M0 2v20h32v-20h-32zM30 20h-28v-16h28v16zM21 24h-10l-1 4-2 2h16l-2-2z';

var nginx = 'path://M30.5 24h-0.5v-6.5c0-1.93-1.57-3.5-3.5-3.5h-8.5v-4h0.5c0.825 0 1.5-0.675 1.5-1.5v-5c0-0.825-0.675-1.5-1.5-1.5h-5c-0.825 0-1.5 0.675-1.5 1.5v5c0 0.825 0.675 1.5 1.5 1.5h0.5v4h-8.5c-1.93 0-3.5 1.57-3.5 3.5v6.5h-0.5c-0.825 0-1.5 0.675-1.5 1.5v5c0 0.825 0.675 1.5 1.5 1.5h5c0.825 0 1.5-0.675 1.5-1.5v-5c0-0.825-0.675-1.5-1.5-1.5h-0.5v-6h8v6h-0.5c-0.825 0-1.5 0.675-1.5 1.5v5c0 0.825 0.675 1.5 1.5 1.5h5c0.825 0 1.5-0.675 1.5-1.5v-5c0-0.825-0.675-1.5-1.5-1.5h-0.5v-6h8v6h-0.5c-0.825 0-1.5 0.675-1.5 1.5v5c0 0.825 0.675 1.5 1.5 1.5h5c0.825 0 1.5-0.675 1.5-1.5v-5c0-0.825-0.675-1.5-1.5-1.5zM6 30h-4v-4h4v4zM18 30h-4v-4h4v4zM14 8v-4h4v4h-4zM30 30h-4v-4h4v4z';
var database = "path://M600.255321 133.164178c120.213708 0 219.218733 68.021482 " +
  "232.313549 155.527628h21.531936c-6.225171-97.884819-117.4874-175.858037-253.843452-175.858037S352.637041 " +
  "190.806986 346.411869 288.691806h21.529903c13.094816-87.506146 112.099841-155.527628 " +
  "232.313549-155.527628z,M600.255321 436.760206c-120.213708 0-219.218733-68.021482-232.313549-155.527627H346.409836c6.225171 " +
  "97.884819 117.4874 175.858037 253.843452 175.858036s247.620314-77.973217 " +
  "253.843452-175.858036h-21.531936c-13.09075 87.504113-112.095775 155.527628-232.309483 " +
  "155.527627z,M346.125211 741.541498c0 101.900075 113.7771 184.508626 254.13011 " +
  "184.508625 140.350978 0 254.130111-82.60855 254.130111-184.508625v-444.199103c0-2.901149-0.103685-5.784001-" +
  "0.286659-8.650589h-21.531936c0.971794 6.4854 1.486153 13.076519 1.486153 19.757091v421.988131c0 " +
  "96.803242-104.675176 175.282686-233.799702 175.282686s-233.799702-78.479444-233.799701-175." +
  "282686V308.448897c0-6.680572 0.516392-13.269658 1.486152-19.757091h-21.529903a135.835594 " +
  "135.835594 0 0 0-0.286658 8.650589v444.199103z";

var ie = 'path://M22.944 19.651h7.377c0.057-0.512 0.080-1.034 0.080-1.569 ' +
  '0-2.507-0.673-4.858-1.848-6.883 1.215-3.228 1.172-5.968-0.455-7.606-1.547-1.54-5.697-1.29-10.388 ' +
  '0.787-0.347-0.026-0.697-0.040-1.051-0.040-6.439 0-11.841 4.431-13.335 ' +
  '10.402 2.020-2.586 4.145-4.461 6.984-5.826-0.258 0.242-1.764 1.739-2.018 ' +
  '1.993-7.486 7.484-9.847 17.26-7.306 19.8 1.931 1.93 5.43 1.604 9.449-0.364 ' +
  '1.869 0.952 3.984 1.488 6.226 1.488 6.035 0 11.15-3.885 13.003-9.295h-7.433c-1.023 ' +
  '1.887-3.023 3.171-5.319 3.171s-4.296-1.284-5.319-3.171c-0.455-0.852-0.716-1.83-' +
  '0.716-2.864v-0.023h12.071zM10.884 16.025c0.171-3.035 2.694-5.456 5.774-5.456s5.604 ' +
  '2.421 5.774 5.456h-11.548zM28.030 5.119c1.048 1.059 1.021 3.007 0.125 5.438-1.535-2.' +
  '341-3.766-4.186-6.4-5.239 2.816-1.207 5.106-1.367 6.274-0.199zM2.921 30.227c-1.337-1.337-0.934-4.144 ' +
  '0.788-7.526 1.072 3.008 3.161 5.534 5.854 7.161-2.982 1.354-5.423 1.584-6.643 0.365z';

var bird = 'path://M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 ' +
  '1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 ' +
  '1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 ' +
  '6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 ' +
  '0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 ' +
  '0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 ' +
  '0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 ' +
  '1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 ' +
  '2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 ' +
  '1.281-0.919 2.394-2.075 3.275-3.394z';

var app = 'path://M28 12c-1.1 0-2 0.9-2 2v8c0 1.1 0.9 2 2 2s2-0.9 2-2v-8c0-1.1-0.9-2-2-2zM4 ' +
  '12c-1.1 0-2 0.9-2 2v8c0 1.1 0.9 2 2 2s2-0.9 2-2v-8c0-1.1-0.9-2-2-2zM7 23c0 1.657 ' +
  '1.343 3 3 3v0 4c0 1.1 0.9 2 2 2s2-0.9 2-2v-4h4v4c0 1.1 0.9 2 2 2s2-0.9 2-2v-4c1.657 ' +
  '0 3-1.343 3-3v-11h-18v11zM24.944 10c-0.304-2.746-1.844-5.119-4.051-6.551l1.001-2.001c0.247-0.494 ' +
  '0.047-1.095-0.447-1.342s-1.095-0.047-1.342 0.447l-1.004 2.009-0.261-0.104c-0.893-0.297-1.848-0.' +
  '458-2.84-0.458s-1.947 0.161-2.84 0.458l-0.261 0.104-1.004-2.009c-0.247-0.494-0.848-0.694-1.342-0.447s-0.694 ' +
  '0.848-0.447 1.342l1.001 2.001c-2.207 1.433-3.747 3.805-4.051 6.551v1h17.944v-1h-0.056zM13 ' +
  '8c-0.552 0-1-0.448-1-1s0.447-0.999 0.998-1c0.001 0 0.002 0 0.003 0s0.001-0 0.002-0c0.551 ' +
  '0.001 0.998 0.448 0.998 1s-0.448 1-1 1zM19 8c-0.552 0-1-0.448-1-1s0.446-0.999 0.998-1c0 0 ' +
  '0.001 0 0.002 0s0.002-0 0.003-0c0.551 0.001 0.998 0.448 0.998 1s-0.448 1-1 1z';

var path =
  "path://M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 " +
  "0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 " +
  "741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 " +
  "47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 " +
  "32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 " +
  "0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 " +
  "32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 " +
  "237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 " +
  "0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 " +
  "0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 " +
  "251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 " +
  "32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z," +
  "M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 " +
  "27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 " +
  "2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 " +
  "0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 " +
  "67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z";

var nodes = [
  {
    id: "1",
    name: "CRM系统",
    path: database,
    desc: "这是CMDB用的Oracle数据库，用来管理现有的CMDB资源以及自动发现的资源。",
    value: [300, 500],
    offset: [0, 0]
  },
  {
    id: "2",
    name: "网络设备",
    desc: "为方便检索资源加入全文检索进行快速查询匹配的资源。",
    path: database,
    value: [300, 350],
    offset: [0, 0],
    alarm: "10.181.1.1主机发生告警"
  },
  {
    id: "3",
    name: "主机",
    desc: `<nav class="pop">
        <p>主机概览</p>
        <ul>
          <li>主机总数：</li>
          <li>230台</li>
        </ul>
        <ul>
          <li>主机严重告警：</li>
          <li>70个</li>
        </ul>
        <ul>
         <li>主机重要告警：</li>
          <li>70个</li>
        </ul>
        <ul>
         <li>巡检主机正常数：</li>
          <li>70个</li>
        </ul>
         <ul>
         <li>巡检主机异常数：</li>
          <li>70个</li>
        </ul>
         <ul>
         <li>主机故障治愈：</li>
          <li>70个</li>
        </ul>
      </nav>`,
    path: database,
    value: [300, 200],
    offset: [0, 0]
  },
  {
    id: "4",
    name: "中间件",
    desc: "为方便检索资源加入全文检索进行快速查询匹配的资源。",
    path: database,
    value: [50, 200],
    offset: [0, 0]
  },
  {
    id: "5",
    name: "数据库",
    desc: "为方便检索资源加入全文检索进行快速查询匹配的资源。",
    path: database,
    value: [550, 200],
    offset: [0, 0]
  },
  {
    id: "###",
    name: "",
    /*    desc: "<ul><li>主机：</li><li>132台;</li></ul>" +
          "<ul><li>数据库：</li><li>5个;</li></ul>" +
          "<ul><li>中间件：</li><li>56个;</li></ul>" +
          "<ul><li>文件系统：</li><li>2301条;</li></ul>",*/
    path: star,
    value: [600, 600],
    offset: [0, 0]
  },
];
var lines = [
  {
    source: "1",
    target: "2",
    ref: "",
    desc: "连接",
    coords: [[300, 500], [300, 350]]
  },
  {
    source: "2",
    target: "4",
    ref: "",
    desc: "连接",
    coords: [[300, 200], [50, 200]]
  },
  {
    source: "2",
    target: "5",
    ref: "",
    desc: "连接",
    coords: [[300, 200], [550, 200]]
  },
  {
    source: "2",
    target: "3",
    ref: "",
    desc: "连接",
    coords: [[300, 350], [300, 200]]
  },
];

var links = [];
lines.forEach(function (value, index, array) {
  if (value.source && value.target) {
    links.push({
      source: value.source,
      target: value.target,
      label: {
        normal: {
          show: true,
          formatter: value.ref
        }
      },
      lineStyle: {
        normal: {
          color: '#2b91e4'
        }
      }
    });
  }
});

var seriesData = function (data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    res.push({
      desc: data[i].desc,
      name: data[i].id,
      title: data[i].name,
      symbol: data[i].path,
      symbolSize: 25, //图标大小
      symbolOffset: data[i].offset,
      draggable: false,
      fixed: true,
      value: data[i].value,
      alarm: data[i].alarm,
      label: {
        normal: {
          position: data[i].direction ? data[i].direction : "bottom",
          distance: 2, //离图标多远
          show: true,
          textStyle: {
            fontSize: 12,
            color: "rgba(7,0,0,1)",
            fontWeight: 600
          },
          /* formatter: function (item) {
             // 细化设置
             return item.data.title || item.data.alias;
           }*/
        }
      },
      itemStyle: {
        color: data[i].icon_color ? data[i].icon_color : "rgba(8,130,230, 1)"
      }
    });
  }
  return res;
};

var graphList = {
  type: "graph",
  coordinateSystem: "cartesian2d",
  legendHoverLink: false,
  hoverAnimation: true,
  nodeScaleRatio: false,
  roam: false,
  lineStyle: {
    normal: {
      width: 0,
      shadowColor: "none",
      color: "transparent"
    }
  },
  links: links,
  data: seriesData(nodes),
  itemStyle: {
    normal: {
      label: {
        show: true,
        formatter: function (item) {
          // 全局设置
          return item.data.title
        }
      }
    }
  },
};

var lineList = {
  type: "lines",
  coordinateSystem: "cartesian2d",
  z: 1,
  animationEasing: "linear",
  clip: false,
  symbol: ['none', 'none'],
  label: {
    normal: {
      show: true,
      formatter: "1111",
      color: 'rgba(255,255,255, 1)',
      fontStyle: 'oblique',
      textStyle: {
        fontSize: 8
      },
    }
  },
  effect: {
    show: true,
    smooth: true,
    trailLength: 0,
    symbol: "arrow",
    color: "orange",
    symbolSize: 5,
    period: 4, //特效动画的时间
    loop: true
  },
  lineStyle: {
    curveness: 0,
    color: "#0ca361",
    opacity: 0.6,
    width: 1,
    type: "dashed"
  },
  data: lines
};

var series = [];
series.push(graphList)
series.push(lineList)

var myOption = {
  title: {
    text: '资源系统概况总览',
    left: 'center',
    textStyle: {
      color: 'black',
      fontStyle: 'italic',
      fontSize: 14,
      textBorderColor: 'white',
      textBorderWidth: 0.8
    }
  },
  grid: {
    left: "50px",
    bottom: "0%",
    top: "0%",
    right: "5%"
  },
  xAxis: {
    show: false,
    type: "value"
  },
  yAxis: {
    show: false,
    type: "value"
  },
  tooltip:
    {
      textStyle: {
        fontSize: 8
      },
      formatter: function (params) {//悬浮提示框显示的内容
        /*if (params.data.isLink) {
          return 'hello';
        }*/
        if (params.dataType === 'node') {
          var html = '';
          var h = "";
          var h0 = "";
          var h1 = "";
          var h2 = "";
          var tmp = params.data.desc;
          if (tmp) {/*
              for (var x = 0; x < tmp.length; x++) {
              }
              h = "<ul>" +
                "<li>说明：</li>" +
                "<li>" + desc + "</li>" +
                "</ul>";*/
            html += "<div class='pop'>" +
              tmp + "</div>";
            return html;
          } else {
            return;
          }
        }
      }
    },//悬浮时的提示框，不设置时是随鼠标移动
  series: series
};
